<!--
 * @Author: lg
 * @Date: 2024-05-21 09:06:17
 * @LastEditors: lg
 * @LastEditTime: 2024-05-23 10:16:30
 * @Description: 
 * @FilePath: \bi-main\src\views\design-center\screens\preview-screen\public-preview.vue
-->
<template>
  <!--局部预览 -->
  <div
    class="scree-view"
    :style="{
      'background-image': `url(${pageConfig?.bgImgUrl})`,
      width: width,
      height: height
    }"
  >
    <preview-child-item :children-list="pageConfig?.list"></preview-child-item>
  </div>
</template>

<script setup>
import { computed, toRefs, watch } from 'vue';
// import { getScreenAndReportDetailApi } from '../api';
import { getScreenAndReportDetailApi } from '@/views/design-center/api/screen';
import useComponentConfig from '@/views/design-center/store/component-config';
import PreviewChildItem from './preview-child-item.vue';
import { useRoute } from 'vue-router';
const route = useRoute();

const useComponentConfigStore = useComponentConfig();

const { pageConfig } = toRefs(useComponentConfigStore);

const width = computed(() => {
  let w =
    pageConfig.value?.w >= window.screen.width
      ? window.screen.width
      : pageConfig.value?.w;

  return `${w / 100}rem`;
});

const height = computed(() => {
  let h =
    pageConfig.value?.h >= window.screen.height
      ? window.screen.height
      : pageConfig.value?.h;

  return `${h / 100}rem`;
});
const getScreenAndReportDetail = async () => {
  // pageConfig.value = JSON.parse(sessionStorage.getItem('pageConfig'));//用于演示,调通后去掉
  let res = await getScreenAndReportDetailApi({
    bigScreenId: route.query.bigScreenId,
   
  });
  if (res.code === 200) {
    pageConfig.value = JSON.parse(res.data?.configStr);
  }
  // console.log('获取大屏配置的详情', JSON.parse(res.data));
};
getScreenAndReportDetail();

watch(
  () => route.query.id,
  () => {
    // console.log(route.name, 11111111111);
    if (route.name === 'preview-screen') {
      //只有预览的才去请求配置项
      getScreenAndReportDetail();
    }
  }
);
</script>
<style lang="scss" scoped>
.scree-view {
  position: relative;
  background: rgb(177, 177, 218);
  background-size: 100% 100% !important;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
